import React, { Component } from 'react'
import { Breadcrumb } from 'antd'
import './draw.less'
import Draw from './example.js'

const imgUrl = require('ASSET/img/dog.jpg')

export default class App extends Component {
  constructor(props) {
    super(props)
    this.displayName = 'Setting'
    this.state = {
      newImage: ''
    }
  }
  handleCut = (data)=>{
    this.setState({
      newImage: data
    })
  }
  handlePaint = (data)=>{
    this.setState({
      newImage: data
    })
  }
  render() {
    var { newImage } = this.state
    return <div className="tederen-setting">
      <div className="tederen-breadcrumb-container">
        <Breadcrumb separator=">">
          <Breadcrumb.Item><a className="tederen-breadcrumb-title" >我的组件</a></Breadcrumb.Item>
          <Breadcrumb.Item><a >画图</a></Breadcrumb.Item>
        </Breadcrumb>
      </div>
      <img src={newImage}/>
      <Draw key={imgUrl}
      source={imgUrl}
      onCut={this.handleCut}
      onPaint={this.handlePaint}/>
    </div>
  }
}
